<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>天狼商城</title>
    <link href="bootstrap-5.3.3-dist/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-3.7.1.js"></script>
  </head>
  <body>
    <!--- 导航开始 -->
    <!--
      1.删除了导航条的折叠按钮和 collapse 类。
      2.设置最小宽度，防止内容被压缩，并启用水平滚动条
        body { min-width: 1200px; overflow-x: auto; } 
      3.使用 navbar-expand
    -->
    <nav class="navbar navbar-expand bg-light">
      <div class="container-lg">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bi bi-geo-alt"></i>广东
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">北京</a></li>
                <li><a class="dropdown-item" href="#">上海</a></li>
                <li><a class="dropdown-item" href="#">天津</a></li>
                <li><a class="dropdown-item" href="#">重庆</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">中国港澳</a></li>
                <li><a class="dropdown-item" href="#">中国台湾</a></li>
                <li><a class="dropdown-item" href="#">京东全球</a></li>
                
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link" aria-current="page" href="#">你好，请登录</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">免费注册</a>
            </li>
            
            <li class="nav-item">
              <a class="nav-link" aria-disabled="true">切换企业版</a>
            </li>
          </ul>
          
          <ul class="navbar-nav">

            <li class="nav-item">
              <a class="nav-link" aria-current="page" href="#">我的订单</a>
            </li>

            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                我的京东
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">全球</a></li>
                <li><a class="dropdown-item" href="#">中国大陆</a></li>
                <li><a class="dropdown-item" href="#">中国香港</a></li>
                <li><a class="dropdown-item" href="#">中国台湾</a></li>
                <li><a class="dropdown-item" href="#">中国澳门</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">韩国</a></li>
                <li><a class="dropdown-item" href="#">新加坡</a></li>
              </ul>
            </li>

            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                企业采购
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">全球</a></li>
                <li><a class="dropdown-item" href="#">中国大陆</a></li>
                <li><a class="dropdown-item" href="#">中国香港</a></li>
                <li><a class="dropdown-item" href="#">中国台湾</a></li>
                <li><a class="dropdown-item" href="#">中国澳门</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">韩国</a></li>
                <li><a class="dropdown-item" href="#">新加坡</a></li>
              </ul>
            </li>

            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                商家服务
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">全球</a></li>
                <li><a class="dropdown-item" href="#">中国大陆</a></li>
                <li><a class="dropdown-item" href="#">中国香港</a></li>
                <li><a class="dropdown-item" href="#">中国台湾</a></li>
                <li><a class="dropdown-item" href="#">中国澳门</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">韩国</a></li>
                <li><a class="dropdown-item" href="#">新加坡</a></li>
              </ul>
            </li>

            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                网站导航
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">全球</a></li>
                <li><a class="dropdown-item" href="#">中国大陆</a></li>
                <li><a class="dropdown-item" href="#">中国香港</a></li>
                <li><a class="dropdown-item" href="#">中国台湾</a></li>
                <li><a class="dropdown-item" href="#">中国澳门</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">韩国</a></li>
                <li><a class="dropdown-item" href="#">新加坡</a></li>
              </ul>
            </li>

            <li class="nav-item">
              <a class="nav-link" aria-current="page" href="#">手机京东</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" aria-current="page" href="#">网站无障碍</a>
            </li>

          </ul>
        </div>
      </div>
    </nav>
    <!--- 导航结束 -->

    <!-- 2.网页头开始 -->
    <header id="header" class="d-flex align-items-center">
      <!--
        垂直居中：align-items-center
        
        d-flex
      -->
      <div class="container-lg d-flex align-items-center justify-content-start">
        <div id="logo">
          <img src="images/jd_logo.png" alt="">
        </div>
        <div id="search" class="d-flex align-items-center">
          <form class="d-flex flex-grow-1">
            <input id="key" class="form-control me-2" type="search" placeholder="搜索商品" aria-label="Search">
            <button id="btn-search" class="btn btn-danger" type="submit">搜索</button>
          </form>
        </div>
        <div id="treasure">广告服务</div>
      </div>
    </header>
    <!-- 2.网页头结束 -->


    <!-- 3.商品分类与导航开始 -->
    <div class="container-lg d-flex mt-2" id="category_carousel">
          <!-- 分类菜单 -->
          <div class="me-3" id="category">
            <ul class="category-menu">
              <li><i class="bi bi-tv cate_menu_icon"></i>家用电器</li>
              <li><i class="bi bi-phone cate_menu_icon"></i>手机 / 运营商 / 数码</li>
              <li><i class="bi bi-laptop cate_menu_icon"></i>电脑 / 办公 / 文具用品</li>
            </ul>
            <div class="submenu">
              <div class="menu_content">二级菜单一</div>
              <div class="menu_content">二级菜单二</div>
              <div class="menu_content">二级菜单三</div>
            </div>
          </div>

          <!-- 轮播图 -->
          <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
              <div class="carousel-inner">
                  <div class="carousel-item active">
                      <img src="images/a.jpg" class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                      <img src="images/b.jpg" class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                      <img src="images/c.jpg" class="d-block w-100" alt="...">
                  </div>
              </div>
              <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              </button>
              <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
              </button>
          </div>
    </div>
    <!-- 3.商品分类与导航结束 -->


    <!-- 4.商品列表开始 -->
    <div id="product_list" class="container-lg">
      <!-- 4.1 选项卡导航 -->
      <div id="tab_list" class="d-flex">
        <div class="smallTabWrapper smallTabWrapperSelected">
          <img src="images/tab/tab_like.png" class="smallTabIcon"/>
          <div class="smallTabTitle">猜你喜欢</div>
        </div>

        <div class="smallTabWrapper">
          <img src="images/tab/tab_sports.png" class="smallTabIcon"/>
          <div class="smallTabTitle">户外运动</div>
        </div>

        <div class="smallTabWrapper">
          <img src="images/tab/tag_snacks.png" class="smallTabIcon"/>
          <div class="smallTabTitle">馋嘴零食</div>
        </div>

        <div class="smallTabWrapper">
          <img src="images/tab/tab_digital.png" class="smallTabIcon"/>
          <div class="smallTabTitle">潮电数码</div>
        </div>

        <div class="smallTabWrapper">
          <img src="images/tab/tab_dress.png" class="smallTabIcon"/>
          <div class="smallTabTitle">服饰时尚</div>
        </div>

        <div class="smallTabWrapper">
          <img src="images/tab/tab_home.png" class="smallTabIcon"/>
          <div class="smallTabTitle">家居日用</div>
        </div>

        <div class="smallTabWrapper">
          <img src="images/tab/tab_clear.png" class="smallTabIcon"/>
          <div class="smallTabTitle">个护家清</div>
        </div>
      </div>

      <!-- 4.2 商品展示 -->
      <div id="product_show" class="row pt-2 d-flex">
        <div class="col-6 col-md-4 col-lg-2 mb-3">
          <div class="card product-card">
              <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Product 1">
              <div class="card-body">
                  <h5 class="card-title">商品名称 1</h5>
                  <p class="card-text text-danger">￥199</p>
                  <a href="#" class="btn btn-primary w-100">立即购买</a>
              </div>
          </div>
        </div>

        <div class="col-6 col-md-4 col-lg-2 mb-3">
          <div class="card product-card">
              <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Product 1">
              <div class="card-body">
                  <h5 class="card-title">商品名称 1</h5>
                  <p class="card-text text-danger">￥199</p>
                  <a href="#" class="btn btn-primary w-100">立即购买</a>
              </div>
          </div>
        </div>

        <div class="col-6 col-md-4 col-lg-2 mb-3">
          <div class="card product-card">
              <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Product 1">
              <div class="card-body">
                  <h5 class="card-title">商品名称 1</h5>
                  <p class="card-text text-danger">￥199</p>
                  <a href="#" class="btn btn-primary w-100">立即购买</a>
              </div>
          </div>
        </div>

        <div class="col-6 col-md-4 col-lg-2 mb-3">
          <div class="card product-card">
              <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Product 1">
              <div class="card-body">
                  <h5 class="card-title">商品名称 1</h5>
                  <p class="card-text text-danger">￥199</p>
                  <a href="#" class="btn btn-primary w-100">立即购买</a>
              </div>
          </div>
        </div>

        <div class="col-6 col-md-4 col-lg-2 mb-3">
          <div class="card product-card">
              <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Product 1">
              <div class="card-body">
                  <h5 class="card-title">商品名称 1</h5>
                  <p class="card-text text-danger">￥199</p>
                  <a href="#" class="btn btn-primary w-100">立即购买</a>
              </div>
          </div>
        </div>

        <div class="col-6 col-md-4 col-lg-2 mb-3">
          <div class="card product-card">
              <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Product 1">
              <div class="card-body">
                  <h5 class="card-title">商品名称 1</h5>
                  <p class="card-text text-danger">￥199</p>
                  <a href="#" class="btn btn-primary w-100">立即购买</a>
              </div>
          </div>
        </div>

        <div class="col-6 col-md-4 col-lg-2 mb-3">
          <div class="card product-card">
              <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Product 1">
              <div class="card-body">
                  <h5 class="card-title">商品名称 1</h5>
                  <p class="card-text text-danger">￥199</p>
                  <a href="#" class="btn btn-primary w-100">立即购买</a>
              </div>
          </div>
        </div>

      </div>
    </div>
    <!-- 4.商品列表结束 -->


    <!-- 5.网页脚开始 -->
     <hr/>
    <footer class="text-grey" id="footer">
      <div class="container-lg text-center">
          <p>© 2024 天狼商城 - 保留所有权利</p>
          <div class="footer-links">
              <a href="#" class="me-3">隐私政策</a>
              <a href="#" class="me-3">用户协议</a>
              <a href="#">联系我们</a>
          </div>
      </div>
    </footer>
    <!-- 5.网页脚结束 -->



    <script src="bootstrap-5.3.3-dist/js/bootstrap.js"></script>
    <script src="js/index.js"></script>
  </body>
</html>